<template>
  <div class="box">
    <div class="boxleft">
      <div class="leftTableTop">
        <titlemessage :list="list.leftTopText"></titlemessage>
        <div class="networkTable">
          <div class="borderImgOne">
            <div class="fourTitleTop">
              <span>上月投诉满意率</span>
              <!--              <span>63.70%</span>-->
              <span>{{ provinceSatisfy.lastSatisfy }}</span>
            </div>
            <div class="fourTitleBottom">
              <span>去年12月投诉满意率</span>
              <span>{{ provinceSatisfy.decemberSatisfy }}</span>
            </div>
          </div>
          <div class="borderImgTwo">
            <div class="fourRightTitleTop">
              <span>累计截止日投诉总满意率</span>
              <span>{{ provinceSatisfy.allRate }}</span>
            </div>
            <div class="fourRightTitleBottom">
              <div class="fourRightBoxOne">
                <!--                <borderNoneRed :border="one"></borderNoneRed>-->
                <borderNone
                  text="环比上月"
                  :num="provinceSatisfy.lastCompare"
                />
              </div>
              <div class="fourRightBoxTwo">
                <borderNone
                  text="定比去年12月"
                  :num="provinceSatisfy.decemberCompare"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="leftCenten">
        <titlemessage :list="list.leftCentenText"></titlemessage>
        <div class="leftEchartsLine">
          <div class="radios">
            <radiobutton
              :radioList="radioVal"
              @handleClickBtn="chooseSatisfyRate"
            ></radiobutton>
          </div>
          <div class="bottomOptionLine">
            <TestEcharts :option="optionLine"> </TestEcharts>
            <!-- <TestEcharts :option="getLineData"> </TestEcharts> -->
          </div>
        </div>
      </div>
      <div class="leftEcharts">
        <div class="leftLastRadio">
          <titlemessage :list="list.leftBottomText"></titlemessage>
        </div>
        <radiobutton
          :radioList="radioTwoVal"
          @handleClickBtn="chooseSatisfyCompare"
        ></radiobutton>
        <div class="echartsLine">
          <TestEcharts :option="leftOption"> </TestEcharts>
        </div>
      </div>
    </div>
    <div class="boxCentenMap">
      <div class="map">
        <mapThree></mapThree>
      </div>
      <div class="mapBottom">
        <titlemessage :list="list.is"></titlemessage>
        <div class="radiogImg">
          <tableCommpoents
            :tableList="tableValDemo"
            :tableCentent="tableValCentent"
          ></tableCommpoents>
        </div>
      </div>
    </div>
    <div class="boxRight">
      <div class="rightTopMessage">
        <titlemessage :list="list.rightTopText"></titlemessage>
        <div class="rightTable">
          <div class="bordrBlueOne">
            <span>基准值</span>
            <span>{{ (Number(provinceComplain.base)).toFixed(2) || 0 }}</span>
          </div>
          <div class="bordrBlueTwo">
            <span>目标值</span>
            <span>{{ (Number(provinceComplain.target)).toFixed(2) || 0}}</span>
          </div>
          <div class="bordrBlueThree">
            <div class="bordrBlueThreeLeft">
              <span>截止日期完成值</span>
              <span>{{ provinceComplain.finish }}</span>
            </div>
            <div class="bordrBlueThreeRight">
              <borderNone text="序时定比" :num="provinceComplain.compare" />
            </div>
          </div>
        </div>
      </div>
      <div class="rightEchartsLine">
        <titlemessage :list="list.rightCentenText"></titlemessage>
        <div class="rightTableEcharts">
          <TestEcharts :option="rightCentenOption"> </TestEcharts>
        </div>
      </div>
      <div class="rightCenten">
        <titlemessage :list="list.rightBottomText"></titlemessage>
        <div class="rightBottom">
          <TestEcharts :option="lastOption"> </TestEcharts>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import TestEcharts from "../components/echarts.vue"; //封装图表组件
import titlemessage from "../components/titleMessage.vue"; //标题组件
import tableCommpoents from "../components/tableAllHome/tousuTable.vue"; //投诉table表格组件
// import tableBorder from "../components/tableBorder.vue"; //下边框table表格组件
// import mapThree from "../components/map.vue"; //3d地图组件
import mapThree from "../components/complainMap.vue"; //3d地图组件
import borderNone from "../components/borderNone/borderNone.vue";
import radiobutton from "../components/radiobutton"; //封装的单选框
import { getComplainInfo, getSatisfyInfo } from "../api/main"; //封装的请求
import {
  ref,
  reactive,
  computed,
  getCurrentInstance,
  onMounted,
  watch,
  nexttick,
} from "vue";
import { timestampToDate , deepCopy} from "../utils/common";

import { useStore } from "vuex";
const store = useStore();
// console.log('useStore.complainDate',store.state.complainDate)

const getComplainDate = computed(() => {
  return store.state.complain.complainDate;
});

// 监听选择日期的变化
watch(
  getComplainDate,
  (newVal) => {
    // 重新请求
    getPageData({ beginCDate: newVal, endCDate: newVal });
  },
  { immediate: true, deep: true }
);

// 分数转百分比
function toPercent(point) {
  let percent = Number(point * 100).toFixed(2);
  percent += "%";
  return percent;
}

function getPageData(date) {
  let beginDate = addDate(new Date(date.endCDate), -30);
  let beginDate2 = addDate(new Date(date.endCDate), -7);

  getSatisfyInfo(date).then( r => {
    if (r.code === 0) {
      if (r.data.length > 0) {
        // data[0] 全省
        if (r.data[0].name === "全省") {
          // 全省满意率 左上
          getProvinceSatisfy(r.data[0]);
        }
        let temp = deepCopy(r.data)
        // 满意率排名表格数据
        // let tempRank = getSatisfyRank(r.data, "allRate");
        let tempRank = getSatisfyRank(temp, "allRate");
        if (tempRank && tempRank.length > 0) {
          getRankData(tempRank);
        }
        let cityData = r.data.filter(item => {
          return item.name !== "全省";
          // return item;
        });
        //  获取环比/定比投诉满意率趋势图
        getSatisfyCompareTrend(cityData);
      } else {
        clearData();
      }
    } else {
      clearData();
    }
  });
  // 投诉满意率趋势数据
  getSatisfyInfo({ beginCDate: beginDate, endCDate: date.endCDate }).then(res => {
      if (res.data && res.data.length > 0) {
        console.log('res.data', res.data)
        // 时间倒序
        // let tempData = getSatisfyRank(res.data, "cdate");
        getSatisfyRank( res.data, "cdate",1);
        // getDetailSatisfy(res.data);
        getDetailSatisfy( res.data);

      } else {
        clearnSatisfyDetail();
      }
    }
  );

  getComplainInfo(date).then( r => {
    if (r.code === 0) {
      if (r.data.length > 0) {
        if (r.data[0].name === "全省") {
          // 全省投诉工单率 右侧数据
          getProvinceComplain(r.data[0]);
        }
      } else {
        clearData();
      }
    } else {
      clearData();
    }
  });
  // 投诉工单率趋势数据
  getComplainInfo({ beginCDate: beginDate2, endCDate: date.endCDate }).then(res => {
      if (res.data && res.data.length > 0) {
        getSatisfyRank(res.data, "cdate",1);
        getProvinceComplainTrend(res.data);
      }
    }
  );
}
/**
 * 日期加减
 * @param date 被加或减的日期
 * @param days 需要加或减的数字
 * @returns {string}
 */
function addDate(date, days) {
  let d = new Date(date);
  d.setDate(d.getDate() + days);
  let m = d.getMonth() + 1;
  return d.getFullYear() + "-" + m + "-" + d.getDate() + " 00:00:00";
}

// 全省投诉满意率 左上侧数据
function getProvinceSatisfy(data) {
  provinceSatisfy.value.lastSatisfy = toPercent(data.lastSatisfy);
  provinceSatisfy.value.decemberSatisfy = toPercent(data.decemberSatisfy);
  provinceSatisfy.value.allRate = toPercent(data.allRate);
  provinceSatisfy.value.lastCompare = toPercent(data.compareLast);
  provinceSatisfy.value.decemberCompare = toPercent(data.compareDecember);
}
let complainList = reactive([]);
// 全省投诉满意率 左中侧数据
function getDetailSatisfy(data) {
  console.log('getDetailSatisfy',data)
  clearnSatisfyDetail();
  let dateArr = [];
  // 取出全省的值, 时间戳  ->  日期
  data.filter( item => {
    if (item.name === "全省") {
      item.cudate = timestampToDate(item.cdate, 5);
      // item.cdate = timestampToDate(item.cdate, 2);
      dateArr.push(item.cudate);
      console.log('dateArr',dateArr)
      satisfyRateData.today.satisfy.push(item.todaySatisfy);
      satisfyRateData.today.noSatisfy.push(item.todayNosatisfy);
      satisfyRateData.today.general.push(item.todayGeneral);
      satisfyRateData.together.satisfy.push(item.togetherSatisfy);
      satisfyRateData.together.noSatisfy.push(item.togetherNosatisfy);
      satisfyRateData.together.general.push(item.togetherGeneral);
      satisfyRateData.branch.satisfy.push(item.branchSatisfy);
      satisfyRateData.branch.noSatisfy.push(item.branchNosatisfy);
      satisfyRateData.branch.general.push(item.branchGeneral);
      satisfyRateData.total.satisfy.push(item.allSatisfy);
      satisfyRateData.total.noSatisfy.push(item.allNosatisfy);
      satisfyRateData.total.general.push(item.allGeneral);
      satisfyRateData.satisfyRate.push((Number(item.allRate) * 100).toFixed(2));
    }
    // return item.name === "全省";
  });
  optionLine.xAxis.data = getRecentData(dateArr).reverse();
  complainList.push(dateArr);
  satisfyRateData.today.satisfy = getDetailSa(satisfyRateData.today.satisfy);
  satisfyRateData.today.noSatisfy = getDetailSa(
    satisfyRateData.today.noSatisfy
  );
  satisfyRateData.today.general = getDetailSa(satisfyRateData.today.general);
  satisfyRateData.together.satisfy = getDetailSa(
    satisfyRateData.together.satisfy
  );
  satisfyRateData.together.noSatisfy = getDetailSa(
    satisfyRateData.together.noSatisfy
  );
  satisfyRateData.together.general = getDetailSa(
    satisfyRateData.together.general
  );
  satisfyRateData.branch.satisfy = getDetailSa(satisfyRateData.branch.satisfy);
  satisfyRateData.branch.noSatisfy = getDetailSa(
    satisfyRateData.branch.noSatisfy
  );
  satisfyRateData.branch.general = getDetailSa(satisfyRateData.branch.general);
  satisfyRateData.total.satisfy = getDetailSa(satisfyRateData.total.satisfy);
  satisfyRateData.total.noSatisfy = getDetailSa(
    satisfyRateData.total.noSatisfy
  );
  satisfyRateData.total.general = getDetailSa(satisfyRateData.total.general);
  satisfyRateData.satisfyRate = getDetailSa(satisfyRateData.satisfyRate);
  chooseSatisfyRate("satisfyRate");
}

function chooseSatisfyRate(radioVal) {
  // const chooseSatisfyRate = (radioVal) => {
  if (radioVal === "satisfyRate") {
    optionLine.series[0].data = satisfyRateData[radioVal];
    optionLine.series[1].data = [];
    optionLine.series[2].data = [];
  } else {
    optionLine.series[0].data = satisfyRateData[radioVal].satisfy;
    optionLine.series[1].data = satisfyRateData[radioVal].noSatisfy;
    optionLine.series[2].data = satisfyRateData[radioVal].general;
  }
  // console.log("satisfyRateData",satisfyRateData)
  complainList.push(satisfyRateData);
}

const lastLeftArr = ref([]);
const decemberLeftArr = ref([]);

// 获取环比/定比投诉满意率趋势图 左下
function getSatisfyCompareTrend(data) {
  let nameArr = [];
  // let decemberArr = []
  data.filter((item) => {
    nameArr.push(item.name);
    // lastArr.push(toPercent(item.lastSatisfy))
    lastLeftArr.value.push((Number(item.compareLast) * 100).toFixed(2));
    decemberLeftArr.value.push((Number(item.compareDecember) * 100).toFixed(2));
  });
  nameArr.unshift(" ");
  nameArr.push(" ");
  lastLeftArr.value.unshift(" ");
  lastLeftArr.value.push(" ");
  decemberLeftArr.value.unshift(" ");
  decemberLeftArr.value.push(" ");
  leftOption.xAxis[0].data = nameArr;
  leftOption.series[0].data = lastLeftArr.value;
  // console.log('leftOption',nameArr[0],lastLeftArr.value[0])
}

// 全省投诉工单率 右上侧数据
function getProvinceComplain(data) {
  provinceComplain.value.base = Number(data.base).toFixed(2);
  provinceComplain.value.target = Number(data.target).toFixed(2);
  provinceComplain.value.finish = Number(data.finish).toFixed(2);
  provinceComplain.value.compare = toPercent(data.compare);
}

function chooseSatisfyCompare(val) {
  // 比4月
  if (val === 1) {
    leftOption.series[0].data = lastLeftArr.value;
  }
  // 比12月
  if (val === 2) {
    leftOption.series[0].data = decemberLeftArr.value;
  }
}

// 投诉工单率序值定比趋势数据
function getProvinceComplainTrend(data) {
  let dateArr = [];
  let baseArr = [];
  let targetArr = [];
  let finishArr = [];
  let compareArr = [];
  // 取出全省的值, 时间戳  ->  日期
  data.filter(item => {
    if (item.name === "全省") {
      let dateNum = timestampToDate(item.cdate, 6);
      item.cdate = timestampToDate(item.cdate, 5);
      // console.log('dateNum',dateNum)
      dateArr.push(item.cdate);
      compareArr.push((Number(item.compare) * 100).toFixed(2));
      baseArr.push((Number(item.base)/31).toFixed(2));
      targetArr.push((Number(item.target)/31).toFixed(2));
      finishArr.push((Number(item.finish)/Number(dateNum)).toFixed(2));
    }
    return item.name === "全省";
  });
  lastOption.xAxis[0].data = getRecentData(dateArr).reverse();
  lastOption.series[0].data = getDetailData(compareArr);
  rightCentenOption.xAxis.data = getRecentData(dateArr);
  rightCentenOption.series[0].data = getDetailData(baseArr);
  // rightCentenOption.series[0].data[5] = 10
  rightCentenOption.series[1].data = getDetailData(targetArr);
  rightCentenOption.series[2].data = getDetailData(finishArr);
  // console.log('rightCentenOption', rightCentenOption.series[0].data)
}
// 最近的8天日期arr顺序
function getRecentData(arr) {
  arr.unshift(" ");
  arr.push(" ");
  // return arr.reverse()
  return arr;
} // 最近的8天日期arr顺序
function getDetailData(arr) {
  arr.unshift("");
  arr.push("");
  arr.push("");
  return arr.reverse();
}
function getDetailSa(arr) {
  arr.unshift("");
  arr.push("");
  return arr.reverse();
  // return arr
}
// 清除页面数据
function clearData() {
  clearProvinceSatisfy();
  // 满意率排名表格
  tableValCentent.value = [];

  // 全省投诉工单率
  provinceComplain.value.base = 0;
  provinceComplain.value.target = 0;
  provinceComplain.value.finish = 0;
  provinceComplain.value.compare = toPercent(0);

  clearnSatisfyDetail();

  lastOption.xAxis[0].data = [];
  rightCentenOption.xAxis.data = [];
  lastOption.series[0].data = ["", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
  rightCentenOption.series[0].data = [
    "",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
  ];
  rightCentenOption.series[1].data = [
    "",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
  ];
  rightCentenOption.series[2].data = [
    "",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
    "0",
  ];
  // lastOption.series[0].data = []
  // rightCentenOption.series[0].data = []
  // rightCentenOption.series[1].data = []
  // rightCentenOption.series[2].data = []
}
// 清除全省满意率
function clearProvinceSatisfy() {
  // 全省满意率
  provinceSatisfy.value.lastSatisfy = toPercent(0);
  provinceSatisfy.value.decemberSatisfy = toPercent(0);
  provinceSatisfy.value.allRate = toPercent(0);
  provinceSatisfy.value.lastCompare = toPercent(0);
  provinceSatisfy.value.decemberCompare = toPercent(0);
}

// 全省满意率
const provinceSatisfy = ref({
  lastSatisfy: 0,
  decemberSatisfy: 0,
  lastCompare: 0,
  decemberCompare: 0,
  allRate: 0,
});
// 全省投诉工单率
const provinceComplain = ref({
  base: 0,
  target: 0,
  finish: 0,
  compare: 0,
});

function clearnSatisfyDetail() {
  satisfyRateData.today.satisfy = [];
  satisfyRateData.today.noSatisfy = [];
  satisfyRateData.today.general = [];
  satisfyRateData.together.satisfy = [];
  satisfyRateData.together.noSatisfy = [];
  satisfyRateData.together.general = [];
  satisfyRateData.branch.satisfy = [];
  satisfyRateData.branch.noSatisfy = [];
  satisfyRateData.branch.general = [];
  satisfyRateData.total.satisfy = [];
  satisfyRateData.total.noSatisfy = [];
  satisfyRateData.total.general = [];
  satisfyRateData.satisfyRate = [];
  optionLine.series[0].data = ["", "0", "0", "0", "0", "0", "0", "0", "0"];
  optionLine.series[1].data = ["", "0", "0", "0", "0", "0", "0", "0", "0"];
  optionLine.series[2].data = ["", "0", "0", "0", "0", "0", "0", "0", "0"];
}

//  地市总满意率排序 type===1 删除省份
function getSatisfyRank(data, key, type) {
  if (data && data.length > 0) {
    if(!type){
      delete data[0];
    }
    data.sort((a, b) => {
      let v1 = a[key];
      let v2 = b[key];
      if (v1 === null) {
        return 1;
      } else {
        if (v1 > v2) {
          return -1;
        } else if (v1 < v2) {
          return 1;
        } else {
          return 0;
        }
      }
    });
    console.log("sort", data);
    return data;
  }
}
// 赋值
function getRankData(data) {
  tableValCentent.value = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i]) {
      data[i].number = i + 1;
      data[i].togetherRate = toPercent(data[i].togetherRate);
      data[i].branchRate = toPercent(data[i].branchRate);
      data[i].allRate = toPercent(data[i].allRate);
      tableValCentent.value.push(data[i]);
    }
  }
}

const tableValDemo = ref([
  //封装table表头名称数据
  {
    thName: "排名",
  },
  {
    thName: "地市",
  },
  {
    thName: "集中处理(%)",
  },
  {
    thName: "分公司处理(%)",
  },
  {
    thName: "总满意率(%)",
  },
]);

const tableValCentent = ref([]);

const radioTwoVal = ref([
  //单选框测试数据
  {
    value: 1,
    label: "环比上月",
  },
  {
    value: 2,
    label: "定比去年12月",
  },
]);

//标题组件传值
const list = ref({
  leftTopText: "全省累计截止日的投诉满意率数据",
  leftCentenText: "全省投诉满意率数据详情",
  leftBottomText: "地市环比/定比投诉满意率趋势图",
  rightTopText: "全省累计截止日期投诉工单率(件/万户)",
  rightCentenText: "全省投诉率日均走势",
  is: "地市总满意率排行榜",
  rightBottomText: "全省序时定比投诉工单率趋势图",
});

const radioVal = ref([
  //单选框测试数据
  { value: "satisfyRate", label: "满意率" },
  { value: "today", label: "当天测评" },
  { value: "together", label: "集中处理" },
  { value: "branch", label: "分公司处理" },
  { value: "total", label: "合计" }
]);

// eslint-disable-next-line no-unused-vars
const satisfyRateData = reactive({
  today: {
    // satisfy: ["-", 20, 31, 32, 28, 27, 32, 10, 26],
    // noSatisfy: ["-", 25, 31, 32, 28, 27, 32, 33, 26],
    // general: ["-", 27, 1, 12, 7, 17, 12, 40, 36],
    satisfy: [],
    noSatisfy: [],
    general: [],
  },
  together: {
    satisfy: [],
    noSatisfy: [],
    general: [],
  },
  branch: {
    satisfy: [],
    noSatisfy: [],
    general: [],
  },
  total: {
    satisfy: [],
    noSatisfy: [],
    general: [],
  },
  satisfyRate: [],
});

let optionLine = reactive({
  legend: {
    data: [
      {
        name: "满意",
        icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
      },
      {
        name: "不满意",
        icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
      },
      {
        name: "一般",
        icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
      },
    ],
    textStyle: {
      color: "rgba(142, 147, 154, 1)",
    },
    top: 15,
  },
  grid: {
    left: "5%",
    right: "5%",
    top: "20%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    // name: "日期",
    type: "category",
    // data: ["", "1号", "2号", "3号", "4号", "5号", "6号", "8号", "10号", ""],
    boundaryGap: false,
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLine: {
      show: false,
      onZero: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
    axisLabel: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
  },
  yAxis: {
    type: "value",
    name: "",
    // data: ["0", "10", "20", "30", "40"],
    // interval: 10,
    // max: 40,
    min: function (value) {
      return Math.floor(value.min);
    },
    max: function (value) {
      return Math.round(value.max) + 1;
    },
    nameTextStyle: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
      align: "right",
    },
    axisLine: {
      show: true,
      onZero: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
        width: 0,
      },
    },
    axisTick: {
      // show : true,
      alignWithLabel: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
    axisLabel: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
  },
  series: [
    {
      // data: satisfyRateData.today.satisfy,
      data: [],
      name: "满意",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        show: true,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#E56137",
      },
      itemStyle: {
        color: "#E56137",
        borderType: "solid",
        shadowColor: "#E56137",
        shadowBlur: 10,
      },
    },
    {
      data: [],
      name: "不满意",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        show: true,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#06D9CC",
      },
      itemStyle: {
        color: "#06D9CC",
        borderType: "solid",
        shadowColor: "#06D9CC",
        shadowBlur: 10,
      },
    },
    {
      // data: ["-", 8, 17, 19, 14, 12, 21, 21, 23],
      data: [],
      name: "一般",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        show: true,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#069BD9",
      },
      itemStyle: {
        color: "#069BD9",
        borderType: "solid",
        shadowColor: "#069BD9",
        shadowBlur: 10,
      },
    },
  ],
  dataZoom: {
    show: true, // 为true 滚动条出现
    realtime: true,
    type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
    height: 10, // 表示滚动条的高度，也就是粗细
    start: 70, // 表示默认展示20%～80%这一段。
    end: 95,
    filterMode: "none",
    zoomLock: true,
  },
});

//地市环比/定比投诉满意率趋势图
const leftOption = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "line", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    top: "15%",
    left: "4%",
    right: "8%",
    bottom: "0%",
    containLabel: true,
  },

  xAxis: [
    {
      type: "category",
      name: "地市",
      data: ["", ""],
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          fontSize: 12,
          color: "rgba(142, 147, 154, 1)",
        },
        //x轴文字的配置
        show: true,
        interval: 0, //使x轴文字显示全
      },
      boundaryGap: false,
      axisTick: {
        show: true,
        alignWithLabel: true,
      },
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "百分比(%)",
      nameLocation: "end",
      min: function (value) {
        return Math.floor(value.min);
      },
      max: function (value) {
        return Math.round(value.max) + 5;
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: "rgba(142, 147, 154, 1)",
          margin: 15,
          fontSize: 12,
        },
        interval: 0, //使x轴文字显示全
      },
      axisLine: {
        //y轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.2)",
          width: 1,
          type: "dashed",
        },
      },
      data: ["-10", "-5", "0", "5", "10"],

      splitLine: {
        //x轴虚线设置
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, 0.2)",
        },
      },
    },
  ],
  series: [
    {
      name: "满意率",
      type: "line",
      label: {
        show: true,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
        formatter: "{c}%",
        fontSize: 10,
      },
      lineStyle: {
        color: "rgba(0, 209, 255, 1)",
      },
      itemStyle: {
        color: "rgba(0, 163, 255, 1)",
        borderType: "solid",
        shadowColor: "rgba(0, 163, 255, 0.6)",
        shadowBlur: 10,
      },
      symbol: "circle",
      symbolSize: 7,
      barWidth: "15", //设置柱状图宽度
      data: ["-", "-5", " 0", "3.2", "2.6", " 7.8", "-2.4", "1.6", "-2.1"],
      areaStyle: {
        origin: "start",
        color: {
          type: "linear",
          x: 10,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 209, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(0, 209, 255, 0)",
            },
          ],
        },
        global: false, // 缺省为 false
      },
    },
  ],
  dataZoom: {
    show: true, // 为true 滚动条出现
    realtime: true,
    type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
    height: 10, // 表示滚动条的高度，也就是粗细
    start: 5, // 表示默认展示20%～80%这一段。
    end: 25,
    filterMode: "none",
    zoomLock: true,
  },
});

//全省投诉工单趋势图
const rightCentenOption = reactive({
  legend: {
    data: [
      {
        name: "基准值",
        icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
      },
        {
          name: "目标值",
          icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
        },
      {
        name: "截止日期完成值",
        icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
      },
    ],
    textStyle: {
      color: "rgba(142, 147, 154, 1)",
    },
    top: 0,
  },
  grid: {
    // left: "0%",
    // left: "4%",
    // right: "4%",
    // top: "18%",
    // bottom: "8%",
    containLabel: true,
    x: 30,
    x2: 50,
    y2: 20,
    top: 50,
  },
  xAxis: {
    name: "日期",
    type: "category",
    data: [
    // "", "1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", ""
    ],
    boundaryGap: false,
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLine: {
      show: false,
      onZero: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
    axisLabel: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
      interval: 0, //使x轴文字显示全
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
  },
  yAxis: {
    type: "value",
    // min: function (value) {
    //   return Math.floor(value.min);
    // },
    // max: function (value) {
    //   return Math.round(value.max) / 2;
    // },
    name: "件/万户",
    // data: ["0", "10", "20", "30", "40"],
    // interval:10,
    // max:40,
    nameTextStyle: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
      // align:'right'
    },
    axisLine: {
      show: true,
      onZero: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
        width: 0,
      },
    },
    axisTick: {
      // show : true,
      alignWithLabel: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
    axisLabel: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
  },
  series: [
    {
      data: [],
      name: "基准值",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        // show: true,
        show: false,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#E56137",
      },
      itemStyle: {
        color: "#E56137",
        borderType: "solid",
        shadowColor: "#E56137",
        shadowBlur: 10,
      },
    },
    {
      data: [],
      name: "目标值",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        // show: true,
        show: false,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#06D9CC",
      },
      itemStyle: {
        color: "#06D9CC",
        borderType: "solid",
        shadowColor: "#06D9CC",
        shadowBlur: 10,
      },
    },
    {
      data: [],
      name: "截止日期完成值",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        // show: true,
        show: false,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#069BD9",
      },
      itemStyle: {
        color: "#069BD9",
        borderType: "solid",
        shadowColor: "#069BD9",
        shadowBlur: 10,
      },
    },
  ],
  // dataZoom: {
  //   show: true, // 为true 滚动条出现
  //   realtime: true,
  //   type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
  //   height: 10, // 表示滚动条的高度，也就是粗细
  //   start: 5, // 表示默认展示20%～80%这一段。
  //   end: 40,
  //   filterMode: "none",
  //   zoomLock: true,
  // },
});

//全省序值定比投诉工单率趋势图
const lastOption = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "line", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    x: 30,
    x2: 50,
    y2: 20,
    top: 50,
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      name: "日期",
      data: ["", "1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", ""],
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          fontSize: 12,
          color: "rgba(142, 147, 154, 1)",
        },
      },
      boundaryGap: false,
      axisTick: {
        show: true,
        alignWithLabel: true,
      },
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "序时定比(%)",
      nameLocation: "end",
      min: function (value) {
        return Math.floor(value.min);
      },
      max: function (value) {
        return Math.round(value.max) + 1;
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: "rgba(142, 147, 154, 1)",
          margin: 15,
          fontSize: 12,
        },
        interval: 0, //使x轴文字显示全
      },
      axisLine: {
        //y轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.2)",
          width: 1,
          type: "dashed",
        },
      },
      // data:['-40','-20','0','20','40','60'],

      splitLine: {
        //x轴虚线设置
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, 0.2)",
        },
      },
    },
  ],
  series: [
    {
      name: "投诉工单率",
      type: "line",
      smooth: true,
      label: {
        // show: true,
        show: false,
        position: "top",
        color: "rgba(255, 255, 255, 1)",
        fontSize: 12,
      },
      lineStyle: {
        color: "rgba(0, 163, 255, 1)",
      },
      itemStyle: {
        color: "rgba(0, 163, 255, 1)",
        borderType: "solid",
        shadowColor: "rgba(0, 163, 255, 0.6)",
        shadowBlur: 10,
        normal: {
          color: "rgba(237, 61, 59, 0.6)",
        },
      },
      // formatter:
      symbol: "circle",
      symbolSize: 7,
      barWidth: "15", //设置柱状图宽度
      data: ["", "", "", "", ""],
      areaStyle: {
        origin: "start",
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(2, 138, 214, 0.6)",
            },
            {
              offset: 1,
              color: "rgba(2, 138, 214, 0.02)",
            },
          ],
        },
        global: false, // 缺省为 false
      },
    },
  ],
  // dataZoom: {
  //   show: true, // 为true 滚动条出现
  //   realtime: true,
  //   type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
  //   height: 10, // 表示滚动条的高度，也就是粗细
  //   start: 0, // 表示默认展示20%～80%这一段。
  //   end: 30,
  //   filterMode: "none",
  //   zoomLock: true,
  // },
});

onMounted(() => {});
</script>
<style lang='less' scoped>
.box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1.5% 2%;
  .boxleft {
    min-width: 400px;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .leftTableTop {
      width: 100%;
      height: 25%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .networkTable {
        width: 100%;
        height: 65%;
        display: flex;
        justify-content: space-between;
        .borderImgOne {
          width: 42.5%;
          height: 100%;
          background: url("../assets/tousu/Slice 29.png") repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .fourTitleTop {
            border-bottom: 1px solid #062d49;
          }
          .fourTitleTop,
          .fourTitleBottom {
            width: 80%;
            height: 40%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: center;
            span:first-child {
              color: #8e939a;
              font-size: 14px;
            }
            span:last-child {
              color: #bac6cc;
              font-size: 18px;
            }
          }
        }
        .borderImgTwo {
          width: 52.5%;
          height: 100%;
          background: url("../assets/tousu/Slice 30.png") repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .fourRightTitleTop {
            width: 80%;
            height: 40%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: center;
            border-bottom: 1px solid #062d49;
            span:first-child {
              color: #8e939a;
              font-size: 14px;
            }
            span:last-child {
              color: #bac6cc;
              font-size: 18px;
            }
          }
          .fourRightTitleBottom {
            width: 100%;
            height: 40%;
            display: flex;
            justify-content: center;
            .fourRightBoxOne,
            .fourRightBoxTwo {
              margin-top: 10px;
              width: 40%;
              height: 80%;
            }
            .fourRightBoxOne {
              border-right: 1px solid #062d49;
            }
          }
        }
      }
    }
    .leftCenten {
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .leftEchartsLine {
        width: 100%;
        height: 85%;
        /*.leftEchartsLine {*/
        /*  width: 80%;*/
        /*  float: right;*/
        /*}*/
        .radios {
          .el-radio-group {
            justify-content: space-around;
            .el-radio-button__inner {
              background: #07406a !important;
            }
          }
        }
        .bottomOptionLine {
          width: 100%;
          height: 90%;
        }
      }
    }
    .leftEcharts {
      width: 100%;
      height: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .echartsLine {
        width: 100%;
        height: 70%;
      }
      /deep/.el-radio-group {
        justify-content: flex-end;
        .el-radio-button {
          margin-left: 24px;
        }
        .el-radio-button__inner {
          background: #004064;
        }
      }
      .leftLastRadio {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        /deep/.el-radio-group {
          width: 50%;
        }
      }
    }
  }
  .boxCentenMap {
    width: 40%;
    min-width: 700px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .map {
      width: 98%;
      // margin: 0 auto;
      height: 65%;
    }
    .mapBottom {
      width: 75%;
      margin: 0 auto;
      height: 35%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .radiogImg {
        width: 100%;
        height: 75%;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
      }
    }
  }
  .boxRight {
    min-width: 400px;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .rightTopMessage {
      width: 100%;
      height: 20%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .rightTable {
        width: 100%;
        height: 55%;
        display: flex;
        justify-content: space-between;
        .bordrBlueOne,
        .bordrBlueTwo {
          width: 20%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          span:first-child {
            color: #8e939a;
            font-size: 14px;
          }
          span:last-child {
            margin-top: 5%;
            color: #d6e3ea;
            font-size: 18px;
          }
        }
        .bordrBlueThree {
          width: 45%;
          height: 100%;
          display: flex;
          justify-content: center;
          .bordrBlueThreeLeft {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            span:first-child {
              color: #8e939a;
              font-size: 14px;
            }
            span:last-child {
              margin-top: 5%;
              color: #bac6cc;
              font-size: 22px;
            }
          }
          .bordrBlueThreeRight {
            width: 40%;
            height: 100%;
            /deep/.borderBlue {
              border: 1px solid rgba(2, 140, 218, 0.5);
            }
            /deep/.el-icon {
              color: #e04d4d;
            }
          }
        }
        .bordrBlueOne,
        .bordrBlueTwo,
        .bordrBlueThree {
          box-shadow: inset 0px 1px 4px 1px rgba(2, 140, 218, 0.8),
            inset 0px -1px 4px 1px rgba(2, 140, 218, 0.8);
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          border: 1px solid #028cda;
        }
      }
    }
    .rightEchartsLine {
      width: 100%;
      height: 37.5%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .rightTableEcharts {
        width: 100%;
        height: 88%;
      }
    }
    .rightCenten {
      width: 100%;
      height: 35%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .rightBottom {
        width: 100%;
        height: 85%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .textCenten {
          height: 48%;
        }
        .textCentenBottom {
          height: 45%;
        }
        .textCenten,
        .textCentenBottom {
          width: 100%;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid rgba(2, 140, 218, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            font-size: 16px;
            color: #bac6cc;
            text-align: center;
            width: 30%;
            display: block;
          }
          .rightText {
            padding: 0 15px;
            width: 70%;
            font-size: 14px;
            color: #8e939a;
          }
        }
      }
    }
  }
}
</style>

